<template>
  <a-modal v-model:visible="visible" title="重新选择地点" centered @ok="handleOk" @cancel="handleCancel" class="amap-model" :width="1080">
    <div class="flex">
      <div class="address-list">
        <div class="flex items-center">
          <a-input v-model:value="keyword" placeholder="请输入地图搜索" />
          <a-divider type="vertical" />
          <a-button type="primary" @click="onSearch">搜索</a-button>
        </div>
        <a-tree :treeData="treeData" :showLine="true" default-expand-all @select="onSelect" />
      </div>
    </div>
    <div class="flex flex-wrap" style="flex: 1">
      <div class="top">
        <a-tag color="orange">点击地图获取经纬度</a-tag>
        <template v-if="lonlat.longitue && lonlat.latitude">
          <a-tag>经纬度：{{ lonlat.longitue }}, {{ lonlat.latitude }}</a-tag>
        </template>
      </div>
      <div id="modal-amap"></div>
    </div>
  </a-modal>
</template>

<script>
import { Image } from 'ant-design-vue';

import poiMarkerDefault from '/@/assets/images/poi-marker-default.png';
import poiMarkerEed from '/@/assets/images/poi-marker-red.png';

let that;
let amap;
let marker;
let markerSelect;
let polygon = null;
export default {
  data() {
    return {
      visible: false,
      lonlat: {
        // 经度
        longitue: '',
        // 纬度
        latitude: '',
      },
      keyword: '',
      treeData: [],
      info: {},
    };
  },
  created() {
    that = this;
  },
  components: { 'a-image': Image },
  methods: {
    /**
     * 初始化地图
     */
    initMap(data) {
      let { longitue, latitude } = data;
      let lon = longitue ? longitue : 113.293197;
      let lat = latitude ? latitude : 22.805413;
      that.info = data;
      that.lonlat = {
        longitue: lon,
        latitude: lat,
      };
      console.log(lon, lat);
      amap = new AMap.Map('modal-amap', {
        resizeEnable: true,
        rotateEnable: true,
        pitchEnable: true,
        //地图中心点
        center: [lon, lat],
        //地图显示的缩放级别
        zoom: 14,
        // zooms: [10, 12],
        pitch: 1,
        // 选装
        rotation: 0,
      });
      amap.addControl(
        new AMap.MapType({
          defaultType: 1,
        })
      );

      // 设置点位
      that.setPoint(lon, lat);

      amap.on('click', ({ lnglat }) => {
        let lng = lnglat.getLng();
        let lat = lnglat.getLat();
        // 设置点位
        that.setSelectPoint(lng, lat);
        that.lonlat = {
          // 经度
          longitue: lng,
          // 纬度
          latitude: lat,
        };
      });
    },
    /**
     * 获取地址列表
     */
    onSearch() {
      AMap.plugin('AMap.AutoComplete', () => {
        new AMap.Autocomplete({
          city: '全国',
        }).search(that.keyword, (status, result) => {
          let list = result.tips;
          for (let i = 0; i < list.length; i++) {
            list[i]['key'] = list[i].id;
            list[i]['title'] = list[i].name;
          }
          that.treeData = list;
          // 搜索成功时，result即是对应的匹配数据
          // var node = new PrettyJSON.view.Node({
          //   el: document.querySelector('#input-info'),
          //   data: result,
          // });
        });
      });
    },
    /**
     * 设置选择的点位
     */
    setSelectPoint(longitue, latitude) {
      if (markerSelect) {
        amap.remove(markerSelect);
      }
      markerSelect = new AMap.Marker({
        position: new AMap.LngLat(longitue, latitude),
        title: '',
        icon: new AMap.Icon({
          // 图标尺寸
          size: new AMap.Size(25, 34),
          // 图标的取图地址
          image: poiMarkerEed,
          // 图标所用图片大小
          imageSize: new AMap.Size(25, 34),
          // 图标取图偏移量
          imageOffset: new AMap.Pixel(0, 0),
        }),
        offset: new AMap.Pixel(-13, -30),
      });
      amap.add(markerSelect);
    },
    /**
     * 设置点位
     */
    setPoint(longitue, latitude) {
      let { direction } = that.info;
      if (marker) {
        amap.remove(marker);
      }
      marker = new AMap.Marker({
        position: new AMap.LngLat(longitue, latitude),
        title: '',
        icon: new AMap.Icon({
          // 图标尺寸
          size: new AMap.Size(25, 34),
          // 图标的取图地址
          image: poiMarkerDefault,
          // 图标所用图片大小
          imageSize: new AMap.Size(25, 34),
          // 图标取图偏移量
          imageOffset: new AMap.Pixel(0, 0),
        }),
        offset: new AMap.Pixel(-13, -30),
      });
      amap.add(marker);
      amap.setZoomAndCenter(15, [longitue, latitude]);
    },

    onSelect(e) {
      const key = e.join(',');
      that.treeData.map((_) => {
        if (_.id == key) {
          let { lng, lat } = _.location;
          that.setSelectPoint(lng, lat);
          let { longitue, latitude } = that.info;
          that.lonlat = {
            // 经度
            longitue: lng,
            // 纬度
            latitude: lat,
          };
          amap.setZoomAndCenter(15, [lng, lat]);
        }
      });
    },
    handleOk() {
      that.$emit('oks', that.lonlat);
      that.visible = false;
    },
    handleCancel() {
      // 销毁高德地图
      amap.destroy();
    },
  },
};
</script>

<style lang="less" >
.ant-modal-root {
  .amap-model {
    .address-list {
      margin: 0 12px 0 0;
      .ant-tree {
        margin: 12px;
      }
    }
    .ant-modal-body {
      display: flex;
      margin: 12px;
      justify-content: space-between;
      flex-wrap: wrap;
      .top {
        width: 100%;
      }
      #modal-amap {
        width: 100%;
        height: 40vh;
        margin: 12px auto;
        cursor: pointer;
      }
    }
  }
}
</style>